<template>
	<view>
		<!-- 第一部分，登录部分以及钱包 -->
		<view class="center-head">
			<view class="head" @click="login">
				<view class="user-img">
					<image :src="loginState?userInfo.avatar_url:'http://127.0.0.1:8000/media/users/avatar.jpg'" alt=""
						width="100%" height="100%" />
				</view>
				<view class="user-login">
					<view href="#">{{loginState?userInfo.name:'点击登录'}}</view>
				</view>
			</view>
			<view class="head-info">
				<view class="order">
					<text>积分:{{userInfo.integral}}</text>
				</view>
				<view class="my-order" @click="gotoLink('/pages/order/order',true)">
					<text>订单列表</text>
				</view>
			</view>
		</view>
		<!-- 第二部分，页面主体部分 -->
		<view class="main-info">
			<view class="info">
				<view class="buy">意见反馈</view>
			</view>
			<view class="info">
				<u-icon size="30" name="setting-fill"></u-icon>
				<view class="buy" @tap="gotoLink('/subpages/personInfo')">设置</view>
			</view>
			<view class="info">
				<u-icon name="info-circle-fill" size="30"></u-icon>
				<view class="buy">关于</view>
			</view>
			<view class="info">
				<u-icon name="server-fill" size="30"></u-icon>
				<view class="buy">客服</view>
			</view>
			<view class="info">
				<u-button type="error" style="{width:100vw;}" @click="logouts" text="退出登录"></u-button>
			</view>

		</view>
		<Login ref="login" v-show="!loginState" />
	</view>
</template>
<script>
	import Login from '../../components/Login.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		request
	} from '@/common/request.js'
	export default {
		data() {
			return {
				// loginState: false
			}
		},
		components: {
			Login
		},
		computed: {
			...mapState(['loginState', 'userInfo'])
		},
		onLoad() {
			// uni.getStorageSync('')
			uni.getStorageSync('userInfo')
			console.log(this.loginState)
			// console.log(this.userInfo)
			// console.log(this.LOGOUT)
			// console.log(this.$store)
		},
		methods: {
			...mapMutations(['LOGOUT']),
			gotoLink(urls, isTab = false) {
				console.log('点击事件触发了', urls)
				if (!isTab) {
					uni.navigateTo({
						url: urls
					})

				} else {
					uni.switchTab({
						url: urls
					})
				}
			},
			// 退出登录状态
			logouts() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							this.LOGOUT()
							uni.showToast({
								title: '退出登录',
								icon: 'success'
							})
						}
					}
				})
				console.log(this.loginState, this.userInfo)
			},
			login() {
				this.$refs.login.show = true
			}
		}
	}
</script>
<style lang="scss" scoped>
	.center-head {
		height: auto;
		overflow: hidden;
		width: 100vw;

		.head {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			height: 160px;
			// margin-top: 20px;
			background-color: #007AFF;
			border-bottom: 1px solid #ccc;

			.user-img {
				margin-left: 30px;
				width: 150rpx;
				height: 150rpx;
				margin-right: 34px;

				image {
					width: 150rpx;
					height: 150rpx;
					border-radius: 50%;
				}
			}

			.user-login view {
				color: #fff;
				font-size: 22px;
			}
		}

		.head-info {
			height: 80px;
			display: flex;
			text-align: center;
			justify-content: space-around;
			align-items: center;
			border-bottom: 1px solid #ccc;

			.icon {
				font-size: 28px;
			}
		}
	}

	.info {
		height: 40px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		// padding-left: 20px;
		border-bottom: 1px solid #ccc;

		.icon {
			font-size: 28px;
		}

		.buy {
			margin-left: 15px;
			font-size: 18px;
			color: #191a1b;
		}
	}
</style>
